import React, { Component } from 'react';

import Homepage_list from '../homepage/homepage_list/homepage_list'
import Img_2 from '../images/1.jpg'
import { Modal } from 'antd';
import './product_list.css'
import Top_bar from '../top_bar/top_bar';
import Main_nav from '../main_nav/main_nav'
import News from '../news/news'
import Menu from '../menu/menu'

import { allProduct } from '../../utils/api'

export default class Product_list extends Component {

    constructor(props) {
        super(props)
        this.state = {
            visible: false,
            data1: [],
            // data2: [],
            // data3: [],
            tempData: []
        }
    }

    showModal = (e) => {
        this.state.data1.map((item, index) => {
            if (item.id == e) {
                this.setState({
                    visible: true,
                    tempData: item
                });
            }
        })
    };

    handleOk = (e) => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };

    handleCancel = (e) => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };
    goHomeM = () => {
        this.props.history.push('/homepage')
    }

    goProductM = () => {
        this.props.history.push('/product_details')
    }

    componentDidMount() {
        let data = {}

        allProduct(data).then((res) => {
            console.log(res, '所有商品')

            this.setState(() => {
                return {
                    data1: res.data.data=='' ? [] : res.data.data.list,
                    // data2: res.data.data=='' ? [] : res.data.data.list.slice(0, 2),
                    // data3: res.data.data=='' ? [] : res.data.data.list
                }
            })
        })
    }

    render() {
        return (
            <div>
                <Top_bar {...this.props} />
                <Main_nav {...this.props} />

                <div className="container collect-product">
                    <div className="breadcrumb-collection">
                        <span className="item_Element_one">
                            <div onClick={this.goHomeM.bind(this)}>
                                <font style={{ verticalAlign: 'inherit' }}>
                                    <font style={{ verticalAlign: 'inherit' }}>主页</font>
                                </font>
                            </div>
                        </span>
                        <span>/</span>
                        <span className="item_Element_two">
                            <font style={{ verticalAlign: 'inherit' }}>
                                <font style={{ verticalAlign: 'inherit' }}>卫衣和卫衣</font>
                            </font>
                        </span>
                    </div>
                    {
                        this.state.data1.map((item, index) => {
                            return (
                                <div className="mini_products" key={index}>
                                    <div className="mini-photos columns">
                                        <img src={item.cover} alt="" className="img-three"
                                            onClick={this.goProductM.bind(this)}
                                        />
                                    </div>
                                    <div className="item-name">
                                        <div onClick={this.goProductM.bind(this)}>
                                            <div className="produce_list">
                                                {item.name}
                                            </div>
                                            <div className="price">
                                                <span className="red_price">${item.price}</span>
                                                <span className="black_price">${item.price}</span>
                                            </div>
                                        </div>
                                        <div className="speed-look">
                                            <div className="speed-look-word" onClick={this.showModal.bind(this, item.id)} >快速浏览</div>
                                        </div>
                                    </div>
                                </div>
                            )
                        })
                    }
                    <Modal
                        visible={this.state.visible}
                        onOk={this.handleOk}
                        onCancel={this.handleCancel}
                        footer={null}
                        width="900px"
                    >
                        <Homepage_list data={this.state.tempData} {...this.props} />
                    </Modal>
                </div>

                <News {...this.props} />
                <Menu {...this.props} />
            </div>
        );
    }
}